<template>
  <div style="width:100%;height: 100%;">
    <div class="big_div">
      <x-header header-background-color="#fff" :left-options="{showBack: true,preventGoBack:true}"  @on-click-back="GoBack">事件信息
        <!-- <a slot="right">Feedback</a> -->
      </x-header>
      <div class="big_content" v-if="contentNo">
        <ul class="list_content" ref="container">
          <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
            <li v-for="(item,index) in eventlist" :key="index" @click="openInfo(item)">
              <p>
                <span class="p_text">{{item.eventtitle}} </span> 
                <span class="p_handle">
                  <span :class="{flag_span_blue:item.eventlevelcode=='4',flag_span_blue:item.eventlevelcode=='5',flag_span_red:item.eventlevelcode=='1',flag_span_orange:item.eventlevelcode=='2',flag_span_yellow:item.eventlevelcode=='3'}">{{item.eventlevelStr}}</span> 
                </span>
              </p>
              <div class="list_bottom_div">
                <span v-if="item.finishflag=='1'"><img src="../../assets/images/icon/commited.png" alt=""> 已结束</span>
                <span v-else><img src="../../assets/images/icon/waitCommit.png" alt=""> 待接受任务</span>
                
                <span class="span_time">{{item.occurtimeStr}}</span>
              </div>
            </li>
            <div v-if="eventlist&&eventlist.length==0&&showNoData" style="width:100%;text-align:center;padding-top: 10%;">
              <img src="../../assets/images/notdata.png" />
            </div>
          </mu-load-more>
        </ul>
      </div>
      <div class="big_contentNo" v-else>
        <img src="../../assets/images/evenNo.png" alt="">
        <div>
          <p>暂无救援事件</p>
          <p>学习些救援知识，提升救援能力</p>
          <p @click="jumpTo()">进入知识库</p>
        </div>
      </div>
    </div>
    <popup v-if="eventModel" v-model="eventModel" height="100%" width="100%" position="right">
        <eventInfo  :itemObj="itemObj" @close="closeInfo"/>
    </popup>
  </div>
</template>



<script>
import { Datetime, PopupPicker, Group, Cell, Picker, XButton, Divider, XSwitch,XHeader,Popup } from 'vux'
import { queryEventList } from "../../assets/js/service";
import eventInfo from "./eventInfo.vue";
export default {
  components: {
    PopupPicker,
    Group,
    Picker,
    XButton,
    Divider,
    Cell,
    XSwitch,
    Datetime,
    XHeader,
    Popup,
    eventInfo
  },
  created(){
    let _this=this;
    this.requestData();
    // let eventList=require("../../assets/json/eventlist.json");
    // console.log(eventList.eventlist)
    // this.eventlist=eventList.eventlist;
    console.log("用户信息==》"+JSON.stringify(_this.$store.state.user))
    this.$enJsBack()//调用安卓方法（手机back键返回问题）
  },
  mounted(){
    window.GoBack=this.GoBack;//安卓调用GoBack（手机back键返回问题）
  },
  methods: {
    jumpTo(){
      if(this.$isAndroid()){
          window.android.emergencyReport();
      }else{
          this.$showBottomToast("进入知识库")
      }
    },
    GoBack(){
      this.$closeStates();
      if(this.$isAndroid()){
          window.android.destory();
      }else{
          this.$showBottomToast("退出系统")
      }
    },
    openInfo(_item){
      let _this=this;
      console.log(_item)
      _this.itemObj=_item;
      _this.eventModel=true;
      //this.$showBottomToast(_type);
    },
    closeInfo(){
      this.eventModel=false;
      window.GoBack=this.GoBack;//安卓调用GoBack（手机back键返回问题）
    },
    changeHandle(){
       this.$showBottomToast("changeHandle");
    },
    refresh () {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      this.eventlist=[];
      this.currentindex=1;
      this.showNoData=false;
      this.requestData();
      // setTimeout(() => {
      //   this.refreshing = false;
      //   let eventList=require("../../assets/json/eventlist.json");
      //   console.log(eventList.eventlist)
      //   this.eventlist=eventList.eventlist;
      //   this.text = this.text === 'List' ? 'Menu' : 'List';
      // }, 2000)
    },
    load () {
      this.loading = true;
      this.currentindex++;
      this.requestData();
    },
    requestData(){
      let _this=this;
      let user=_this.$store.state.user;
      if(user){
        let param={"userid":user.userid,"orgcode":user.orgcode,"keyword":"","pageno":_this.currentindex,"pagesize":10};
        queryEventList(param,function(res){
          _this.loading = false;
          _this.refreshing = false;
          _this.showNoData=true;
          if(res.status=='200'){
            if(_this.currentindex==1){
              _this.eventlist=res.data;
            }else{
              if(res.data&&res.data.length>0){
                res.data.forEach((item,index)=>{
                  console.log(item);
                   _this.eventlist.push(item);
                })
              }
            }
            if(_this.eventlist.length==0){
                _this.contentNo=false;
            }
          }
          console.log("res==>",res)
        })
      }else{
        _this.$showBottomToast("获取用户信息失败！ 请重新登录")
      }
      
      
    }
  },
  data () {
    return {
      queryMap:{},
      date: '',
      eventModel:false,
      eventlist:[],
      refreshing: false,
      itemObj:{},
      loading: false,
      text: 'List',
      currentindex:1,
      showNoData:false,
      contentNo:true
    }
  }
}
</script>

<style lang="less" scoped>
.big_div{
  width: 100%;
  height: 100%;
  // background:url("../../assets/images/bj.png");
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  .big_title{
    width: 100%;
    height: 50px;
    line-height: 50px;
    span{
      display: inline-block;
      float: left;
      color: #ffffff;
    }
    .span_front{
      width: 75%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding-left: 5%;
      font-size: 16px;
    }
    .span_handle{
       width: 25%;
       img{
         width: 75%;
         vertical-align: middle;
       }
    }
  }
  .big_content{
    width: 100%;
    height:calc( 100% - 46px ) ;
    border-top: solid 1px rgba(255, 255, 255, 0.15);
    .list_content{
      width: 100%;
      height: 100%;
      overflow-y: auto;
      background: #f4f7f8;
      li{
        margin-top: 2vh;
        width: 100%;
        background: #ffffff;
        p{
          width: 100%;
          
          padding: 10px 5%;
          .p_text{
            width: 75%;
            float: left;
            font-size: 15px;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .p_handle{
            width: 25%;
            display: inline-block;
            span{
              float: right;
              width: 95%;
              color: #409eff;
              border: solid 1px #409eff;
              border-radius: 6px;
              text-align: center;
            }
            .flag_span_red{
              width: 95%;
              display: inline-block;
              color: #ff0000;
              border: solid 1px #ff0000;
              border-radius: 6px;
              text-align: center;
            }
            .flag_span_orange{
              // width: 65%;
              width: 95%;
              display: inline-block;
              color: #d75b10;
              border: solid 1px #d75b10;
              border-radius: 6px;
              text-align: center;
            }
            .flag_span_yellow{
              //width: 65%;
              width: 95%;
              display: inline-block;
              color: #d7cc10;
              border: solid 1px #d7cc10;
              border-radius: 6px;
              text-align: center;
            }
            .flag_span_blue{
              //width: 65%;
              width: 95%;
              display: inline-block;
              color: #409eff;
              border: solid 1px #409eff;
              border-radius: 6px;
              text-align: center;
            }
          }
          
        }
        
        .list_bottom_div{
          width: 100%;
          height: 6vh;
          line-height: 5vh;
          padding-left: 5%;
          font-size: 13px;
          span{
            width: 45%;
            height: 100%;
            display: inline-block;
            img{
                width: 12%;
                vertical-align: middle;
            }
          }
          .span_time{
            float: right;
            padding-right: 5%;
            text-align: right;
            color: #888;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      
    }
  }
  .big_contentNo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 70px;
    img{
      width: 60%;
    }
    div{
      text-align: center;
      p:nth-child(1){
        font-size: 20px;
        padding: 20px;
      }
      p:nth-child(2){
        color: #333333;
      }
      p:nth-child(3){
        color: #fff;
        width: 190px;
        line-height: 50px;
        height: 50px;
        font-size: 16px;
        margin-top: 38px;
      background-image: linear-gradient(0deg, 
        #20a0e7 0%, 
        #33abed 100%), 
      linear-gradient(
        #149ce6, 
        #149ce6);
      background-blend-mode: normal, 
        normal;
      border-radius: 5px;
      }
    }
  }
}
.picker-buttons {
  margin: 0 15px;
}
</style>